<template>
  <div>
    <div class="order-box">
      <div class="menu-box" ref="menuBox">
        <ul>
          <li
            v-for="(item, index) in productList" :key="index"
            @click="changeMenu(index)"
            :class="{'active': currentIndex === index}"
            class="menu-list">
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="product-box" ref="productBox">
        <ul>
          <li
            v-for="(item, typeIndex) in productList" :key="typeIndex"
            class="cate-list">
            <div class="cate-title">{{item.name}}</div>
            <ul>
              <li
                v-for="(prod, index) in item.content" :key="prod.id"
                class="prod-list">
                <div class="prod-img-box">
                  <img :src="prod.img" alt="">
                </div>
                <div class="prod-info">
                  <div class="name">{{prod.name}}</div>
                  <div class="sale">
                    <span class="num">月销 {{prod.num}}</span>
                    <span>赞 {{prod.up}}</span>
                  </div>
                  <div class="price">&yen; {{prod.price}}</div>
                </div>
                <div class="add-cart-container">
                  <add-cart :type="typeIndex" :index="index"></add-cart>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import BScroll from 'better-scroll'
import addCart from '../../components/addcart'
export default {
  components: {
    addCart
  },
  data () {
    return {
      menuScroll: null,
      prodScroll: null,
      currentIndex: 0,
      menuList: [],
      posY: [],
      scrollY: 0
    }
  },
  computed: {
    ...mapState('product', ['productList'])
  },
  methods: {
    initScroll () {
      this.menuScroll = new BScroll('.menu-box', {
        bounce: false,
        click: true
      })
      this.prodScroll = new BScroll('.product-box', {
        bounce: false,
        probeType: 3,
        click: true
      })
      // 获取右侧每个分类的垂直方向的位置
      this.getPosY()
      // 获取左侧li列表
      this.menuLst = this.$refs.menuBox.getElementsByClassName('menu-list')
      this.prodScroll.on('scroll', e => {
        this.scrollY = Math.abs(Math.round(e.t))
      })
    },
    changeMenu (index) {
      const prodList = this.$refs.productBox.getElementsByClassName('cate-list')
      const el = prodList[index]
      this.prodScroll.scrollToElement(el, 300)
      this.currentIndex = index
    },
    getPosY () {
      const prodList = this.$refs.productBox.getElementsByClassName('cate-list')
      let y = 0
      for (let i = 0; i < prodList.length; i++) {
        if (i === 0) {
          this.posY.push(y)
        } else {
          const prevEle = prodList[i - 1]
          y += prevEle.offsetHeight
          this.posY.push(y)
        }
      }
    }
  },
  created () {
    this.$store.dispatch('product/getProductList', this.$route.params.id).then(() => {
      // 初始化betterscroll
      this.$nextTick(() => {
        this.initScroll()
      })
    })
  },
  watch: {
    scrollY (val) {
      for (let i = 0; i < this.posY.length; i++) {
        const pos1 = this.posY[i]
        const pos2 = this.posY[i + 1]
        if (pos1 <= val && pos2 > val) {
          const el = this.menuList[i]
          this.menuScroll.scrollToElement(el, 300, 0, -100)
          this.currentIndex = i
          break
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.order-box {
  display: flex;
  height: calc(100vh - 44px);
  .menu-box {
    width: 1.6rem;
    flex: 0 0 1.6rem;
    background-color: #f5f5f5;
    height: calc(100vh - 94px);
    overflow: hidden;
    .menu-list {
      color: #2c3e50;
      font-size: .26rem;
      padding: .18rem .24rem .44rem;
      line-height: .36rem;
      &.active {
        color: #f00;
      }
    }
  }
  .product-box {
    flex: 1;
    background-color: #fff;
    height: calc(100vh - 94px);
    overflow: hidden;
    .cate-list {
      padding: 0 .2rem;
      .cate-title {
        line-height: .72rem;
      }
      .prod-list {
        display: flex;
        margin-bottom: .4rem;
        position: relative;
        .prod-img-box {
          width: 1.5rem;
          flex: 0 0 1.5rem;
          margin-right: 0.15rem;
          img {
            width: 100%;
          }
        }
        .prod-info {
          flex: 1;
          min-width: 0;
          .name {
            font-size: 0.32em;
            color: #333;
            font-weight: 700;
            line-height: .45rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: .04rem;
          }
          .sale {
            color: #666;
            font-size: 11px;
            margin-bottom: 0.06rem;
            .num {
              margin-right: .2rem;
            }
          }
          .price {
            color: #fb4e44;
            font-size: .36rem;
          }
        }
        .add-cart-container {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
}
</style>
